<template>
  <div class="add">
    <input type="text" v-model="newItem" placeholder="请输入代办事项">
    <button @click="addItem">添加</button>
  </div>
</template>

<script>
  export default {
    name: 'add',
    data() {
        return {
            newItem: ''
        }
    },
    methods: {
        addItem() {
            if (this.newItem.trim() !== '') {
                this.$emit('add-item', this.newItem)
                this.newItem = ''
            }
        }
    },
    emits: ['add-item']
  }
</script>

<style>
  .add {
    display: flex;
    margin: 20px 0;
  }
  .add input {
    flex: 1;
    height: 24px;
    padding: 5px;
    border-radius: 5px;
    margin-right: 20px;
    font-size: 16px;
  }
  .add button {
    padding: 5px 20px;
    border-radius: 5px;
    background-color: #42b983;
    color: #fff;
    cursor: pointer;
  }
  .add button:hover {
    background-color: #349876;
  }
</style>